<template >
  <div style="height: 100%">
    <div class="sm-box">
      <div style="display: flex;margin-left: 5px;padding-top: 10px  ">
        <i class="icon-gongyingshangzhifu" style="margin-top: 5px"></i>
        <a @click="backFirst" href="#"><h3>&nbsp;供应商信息管理</h3></a>
        <span style="color: #ff3526;display: block;margin-top: 2px">&nbsp;(点击左边箭头可查看供应商详情)</span>
      </div>
      <div  style="background-color: #f2f2f2;height: 600px;margin-right: 15px;border-radius: 10px">
        <div style="float: right;margin-bottom: 5px;margin-right: 20px;margin-top: 5px">
          <el-input placeholder="请输入供应商姓名" style="width: 220px"  v-model="searchMsg" class="input-with-select">
            <el-button slot="append" @click="changeSerachMsg" class="el-icon-search"  style="background-color: #34a89b;color: white;font-weight: bold;font-size: 15px" ></el-button>
          </el-input>
        </div>
        <div style="height: 545px">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="suppliersList"
          height="489"
          style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"  inline class="demo-table-expand">
                <el-form-item label="供应商名称">
                  <span>{{ props.row.supplierName }}</span>
                </el-form-item>
                <el-form-item label="注册时间">
                  <span>{{ props.row.signupTime }}</span>
                </el-form-item>
                <el-form-item label="供应商 ID">
                  <span>{{ props.row.supplierId }}</span>
                </el-form-item>
                <el-form-item label="电话">
                  <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="qq">
                  <span>{{ props.row.qq }}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ props.row.remark }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.email }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="供应商名称"
            width="440"
            prop="supplierName">
          </el-table-column>
          <el-table-column
            align="center"
            label="采购欠款"
            width="200"
            >
            <template slot-scope="scope">
            <span >{{ scope.row.debt }}</span> <span>元</span>
          </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="未开票金额"
            width="200"
          >
            <template slot-scope="scope">
              <span >{{ scope.row.invoice }}</span> <span>元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="交易往来查询"
            width="120"
          >
            <template slot-scope="scope">
              <el-button icon="icon-jiaoyichaxun"  @click="checkTrade(scope.row.supplierId)" size="small"></el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="操作方式 "
            width="200"
            >
            <template slot-scope="scope">
              <el-button  @click="updateSuppliers(scope.row.id)" type="success" size="small"  >修改</el-button>
              <el-button  type="danger" size="small" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <el-pagination
          style="margin-top: 10px;text-align: center"
          background
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next"
          @current-change="changePage"
          :total=total>
        </el-pagination>
      </div>


    </div>
  </div>
</template>
<!--供应商管理-->
<script>
import {get} from "../../utils/request";
import {SUPPLIERS_MANAGE} from "../../utils/basic-data";

export default {
  name: "SuppliersManage",
  data(){
    return {
      loading:true,
      searchMsg:null,
      total:0,
      pageSize:SUPPLIERS_MANAGE,
      currentPage:1,
      suppliersList:[],
    }
  },
  mounted() {
    get('/api/v1/supplier/pop/show',{now:this.currentPage,size:this.pageSize}).then(resp=>{
      this.suppliersList=resp.data.objectList
      this.total=resp.data.total
      this.currentPage=resp.data.currenPage

      this.loading=false
    })
  },
  methods:{
    backFirst(){
      this.searchMsg=null;
      this.changeSerachMsg()
    },
    checkTrade(value){
      console.log(value)
    },
    changeSerachMsg(){
      this.loading=true
      this.currentPage=1
      get('/api/v1/supplier/pop/show',{now:this.currentPage,size:this.pageSize,searchMsg:this.searchMsg}).then(resp=>{
        this.suppliersList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },
    updateSuppliers(value){
      console.log(value)
    },
    changePage(value){
      this.loading=true
      get('/api/v1/supplier/pop/show',{now:value,size:this.pageSize,searchMsg:this.searchMsg}).then(resp=>{
        this.suppliersList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },

  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.demo-table-expand {
  font-size: 0;
  margin-left: 200px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.sm-box{
  margin-top: 15px;
  margin-left: 20px;
  width: 1240px;
  height: 665px;
  padding-left: 17px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}

</style>
